<template>
    <!-- 电影展示组件 -->
    <div class="home-box">
        <div v-for="(value,key) in films" :key="value.typeId">
            <div class="list-name">
                <span>{{value.typeName}}</span>
                <span class="list-more" @click="$emit('update:page','Films')">更多 > </span>
            </div>
            <film-list class="list-content" :list="value.list"></film-list>
        </div>
    </div>
</template>
<script>
    const Home = Vue.extend({
        template: document.currentScript.ownerDocument.querySelector("template"),
        components: {
            filmList
        },
        data(){
            return{
                films: []
            }
        },
        methods: {
            loadFilmSort() {
                $.ajax({
                    url: "http://localhost/filmApi/loadTyps.php",
                    dataType: "json",
                    success: ({ result }) => {
                        this.films = result;
                        // this.getFilmById();
                        for (let i in result) {
                            this.getFilmById(result[i].typeId, i)
                        }
                    }
                })
            },
            getFilmById(typeId, i) {
                $.ajax({
                    url: "http://localhost/filmApi/loadFilms.php",
                    data: {
                        typeId
                    },
                    dataType: "json",
                    success: ({ result }) => {
                        // console.log(result);
                        // this.films[i].list=result;
                        this.$set(this.films[i], "list", result);
                    }
                })
            }
        },
        mounted() {
            this.loadFilmSort();
            // console.log(this);
        }
    })
</script>